<template>
    <div  class="component-list-box">
     <el-table :data="cTData" stripe>
        <el-table-column v-if="haveSerialNumber" align="center" type="index" label="序号" width="90" />
        <el-table-column v-for="(value, key) in transObj" :key="key" :prop="key" :label="value"  align="center" />
            <!-- 
          <el-table-column  v-if="/Time/.test(key)" :formatter="fcTime" :prop="key"  :label="value" />
          <el-table-column  v-else-if="/online/.test(key)" :formatter="fonline2"  :prop="key"  :label="value" />
          <el-table-column  v-else :prop="key"  :label="value" /> -->
       
        <el-table-column v-if="haveOperation" align="center" label="操作" >
      <template #default="scope">
          <el-row class="el-rowsss">
          <el-button type="primary" @click="$emit('clickEdit',{index:scope.$index,row:scope.row})" :icon="Edit" circle/>
          <!-- <el-button type="danger"  @click="clickDel(scope)" :icon="Delete" circle /> -->
          <el-button type="danger"  @click="$emit('clickDel',{index:scope.$index,row:scope.row})" :icon="Delete" circle />
          </el-row>
        </template>
        </el-table-column>
  </el-table>
</div>
  </template>

<script setup>

import { reactive,ref,onMounted  } from "vue"
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'
/**
 * 接收参数 cTData
 * 展示的数据数组
 * 接收参数 transObj
 *  定义表头和需要渲染的字段名，{对应显示的参数(string类型):"label名称",.....}(对应需要渲染的字段名),
 * 接收参数 haveSerialNumber
 *  是否显示序号haveSerialNumber=true,
 * 接收参数 haveOperation
 * 是否要有操作列haveOperation=true
 */
defineProps({
        cTData:Array,
        haveOperation:Boolean,
        haveSerialNumber:Boolean,
        transObj:Object,
    })

/**
 * 子传给父的事件
 * 点击清除事件
 * 点击修改事件
 */
//  const emits = defineEmits(["clickDel"])


//获取所有的
//   const arr = reactive({name:'name',date:'date',age:'大哈',msg:'求我',msg1:'求我2'});
//   const haveSerialNumber = ref(true);
//   const haveOperation = ref(true);
//   const cTData = [];
  </script>


  


  <style lang="less">
    .component-list-box{
        margin-top: 10px;
        // border: 1px solid red;

    // 操作
    .el-rowsss{
    display: flex;
    justify-content: center;
    align-items: center;
  }
    }


   </style>